<template>
    <div class="withdetail">
        <div class="swiper-tab dis-flex box-align-center flex-y-center">
            <div v-for="item in tabList">
                <div class="swiper-tab-item" :class="dataType == item.value ? 'on' : ''" @click="swichNav(item.value)">
                    {{ item.text }}
                </div>
            </div>
        </div>
        <cube-scroll
                ref="scroll"
                class="scroll-body"
                :data="list"
                :options="options"
                @pulling-up="lists"
        >
            <div class="widget-list" v-if="list.length">
                <div class="widget__detail dis-flex flex-x-between flex-y-center" v-for="item in list" >
                    <div class="detail__left dis-flex flex-dir-column flex-x-around">
                        <div class="detail__money f-30">提现 {{ item.money }}元</div>
                        <div class="detail__time col-9 f-24">{{ item.create_time }}</div>
                    </div>
                    <div class="detail__right dis-flex flex-dir-column flex-x-center flex-y-center">
                        <div class="detail__status f-28"
                             :class="item.apply_status == 20 || item.apply_status == 40 ? 'col-green' : 'col-m'">{{
                            applyStatus[item.apply_status] }}
                        </div>
                        <div v-if="item.apply_status == 30">
                            <div class="detail__reason f-24" @click="triggerReasonMsg(item.reject_reason)">查看原因</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 没有记录 -->
            <div class="yoshop-notcont" v-if="!list.length &&!isLoading">
                <!--                        <div class="iconfont icon-wushuju"></div>-->
                <div class="cont">亲，暂无订单哦</div>
            </div>
        </cube-scroll>
    </div>
</template>
<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";

    @Component({
        components: {},
    })

    export default class Withdetail extends Sence {
        public isLoading: boolean = true; // 加载锁
        public list: any = []; // 提现明细数据
        public page: number = 1; // 当前页码
        public size: any = 10; // 每页显示的条数
        public options: object = {
            pullUpLoad: true
        };//上拉加载

        public dataType: any = -1;// 选中顶部菜单值
        public tabList: any = [{value: -1, text: "全部"}, {value: 10, text: "审核中"}, {value: 20, text: "审核通过"}, {
            value: 40,
            text: "已打款"
        }, {value: 30, text: "驳回"}];
        public applyStatus:any={10:'审核中',20:'审核通过',30:'驳回',40:'已打款','-1':'全部'}

        /**
         * 初始化
         */
        public mounted():void{
           this.lists();
        }

        /**
         * 切换顶部选项
         */
        public swichNav(value: any): void {
            if (this.dataType == value) {
                return;
            }
            this.dataType = value;
            this.isLoading=true;
            this.list=[];
            this.page=1;
            this.options = {
                pullUpLoad: true
            };//上拉加载
            this.lists();
        }

        /**
         * 提现明细接口
         */
        public lists():void{
            this.post('api/user.withdraw/lists',{
                status:this.dataType,
                page:this.page,
                size:this.size
            }).then((res:any)=>{
                this.list = [...this.list, ...res.data.list.data];
                this.page += 1;
                if (res.data.list.data.length < this.size) {
                    this.options = {
                        pullUpLoad: false
                    };//上拉加载
                }
                this.isLoading = false;
            })
        }

        /**
         * 查看驳回原因
         */
        public triggerReasonMsg(reason:string):void {
            (<any> this).$createDialog({
                type: 'alert',
                title: '友情提示',
                content: reason,
                icon: 'cubeic-alert',
            }).show();
        }




    }
</script>

<style scoped lang="stylus">
    .scroll-body
        height calc(100vh - 40px)

    .swiper-tab {
        display flex;
        flex-direction row;
        align-items center;
        width: 100%;
        text-align: center;
        height: 40px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
    }

    .swiper-tab .swiper-tab-item {
        width 20vw;
        height 40px;
        font-size: 14px;
        color: #777;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-bottom: 2px solid #ffffff00;
    }

    .swiper-tab .on {
        color: #786cff;
        border-bottom: 2px solid #786cff;
    }

    .yoshop-notcont {
        padding: 65px 50px;
        box-sizing: border-box;
    }

    .yoshop-notcont .cont {
        display: block;
        text-align: center;
        font-size: 15 px;
        color: #999;
        margin-top: 5 px;
    }

    .widget-list {
        padding: 5px 10px 20px 10px;
        box-sizing: border-box;
    }

    .widget__detail {
        padding: 12px 8px;
        box-sizing: border-box;
        font-size: 14px;
        border-bottom: 1px solid #e7e7e7;
    }

    .widget__detail .detail__money {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .widget__detail .detail__reason {
        margin-top: 8px;
        color: #8e84fc;
    }
    .flex-x-between {
        justify-content: space-between;
    }
    .dis-flex {
        display: flex !important;
    }
    .flex-dir-column {
        flex-direction: column;
    }
    .flex-x-around {
        justify-content: space-around;
    }
    .flex-y-center {
        align-items: center;
    }
    .col-m {
        color: #ff495e !important;
    }
    .col-green {
        color: #0ed339 !important;
    }
    .col-9 {
        color: #999;
    }


</style>
